<!-- 电子运单-修改 -->
<template>
	<view class="add-box">
		<view class="info shadow radius">
			<view class="info-label">
				<text>装货信息</text>
			</view>
			<view class="info-item">
				<text class="text">装货日期</text>
				<uni-datetime-picker class="date-select" type="date" :end="info.unloadingDate||Date()" placeholder="请选择装货日期"
					v-model="info.loadingDate" :disabled="info.billState!='10'" />
			</view>
			<view class="info-item">
				<text class="text">卸货日期</text>
				<uni-datetime-picker class="date-select" type="date" :start="info.loadingDate" placeholder="请选择卸货日期"
					v-model="info.unloadingDate" />
			</view>
		</view>
		<view class="info shadow radius" v-for="(items,index) in info.busiTaskaddrList" :key="index">
			<view class="info-label">
				<text>收货方{{info.busiTaskaddrList.length>1?(index+1):""}}</text>
				<text class="uni-icon del-care" v-show="info.busiTaskaddrList.length>1"
					@click="delCard(index)">&#xe404;</text>
			</view>
			<view class="info-item">
				<text class="text" style="color: #FFD14A;" @click="shmc(index,'')">名称</text>
				<input type="text" class="input" v-model="items.comName" @input="(e)=>inputSearch(e,index,'8')" @confirm="doSearch(index,items.comName,'8')" />
			</view>
			<view class="info-item">
				<text class="text">联系电话</text>
				<input type="text" class="input" v-model="items.contactsTel" />
			</view>
			<view class="info-item">
				<text class="text">所在地区</text>
				<select-region class="inputDq" :localdata="regionData" @change="(text)=>changeAdrS(index,text)"
									v-model="sh_map.sh_dqCode[index]" :placeholder="dqadd"></select-region>
				<!-- <input type="text" class="input" v-model="items.zipCode" /> -->
			</view>
			<view class="info-item">
				<text class="text">详细地址</text>
				<input type="text" class="input" v-model="items.addr" />
			</view>
			<view class="add-card" @click="addCard(index)" v-if="info.isCityDistribution">
				<text class="uni-icon">&#xe468;</text><text>新增收货方</text>
			</view>
		</view>
		<view class="info shadow radius">
			<view class="info-label">
				<text>运输路线</text>
			</view>
			<view class="info-item">
				<text class="text">途径路线</text>
				<input type="text" class="input"  @input="(e)=>inputSearch(e,'','9')"
					@confirm="doSearch('',info.lineName,'9')" v-model="info.lineName" placeholder="请输入途径路线" />
			</view>
			<view class="info-item">
				<text class="text">线路里程</text>
				<input type="text" class="input" v-model="info.lineMile" placeholder="请输入线路里程" />
			</view>
		</view>
		<view class="add-btns">
			<view class="btn-cancel" @click="$goBack(1,1)">
				<text>取 消</text>
			</view>
			<view class="btn-submit" @click="submit">
				<text>确 认</text>
			</view>
		</view>
		<!-- 收货方 -->
		<selectTaskFy ref="child8" @change="shChange" />
		<select-task ref="child9" @change="selectLine"></select-task>
	</view>
</template>

<script>
	import store from "@/store/index";
	import selectRegion from '@/components/tool-select/select-region';
	import selectTaskFy from '@/components/tool-select/select-task-fy.vue';
		import selectTask from '@/components/tool-select/select-task.vue';
	import {
			getSelectPath
		} from '@/common/util.js';
	export default {
		components: {
			selectRegion,
			selectTaskFy,
			selectTask
		},
		data() {
			return {
				select: {
					reason: [{
						"value": "1",
						"text": "车辆维修"
					}, {
						"value": "2",
						"text": "普通运输"
					}, {
						"value": "3",
						"text": "车辆年检"
					}, {
						"value": "4",
						"text": "罐体检验"
					}, {
						"value": "5",
						"text": "车辆保养"
					}, {
						"value": "6",
						"text": "非民用运输"
					}],
				},
				info: {
					busiTaskaddrList: [],
					isCityDistribution: 0,
					// billExtendInfoVOList:[{
					// 	loadGoodsVos:[],
					// 	unLoadGoodsVos:[]
					// }
						
					// ]
				},
				//所在地区组件字段
				regionData: [],
				dqadd:'',
				sh_map: {
					sh_name: [""], //名称
					sh_phoneNum: [""], //联系电话
					sh_dq: [""], //所在地区
					sh_address: [""], //详细地址
					sh_dqCode: [""], //所在地区code
					sh_dqLocation: [""], //所在地区经纬度
					sh_location: [""], //收获方经纬度
					sh_corpCustId: [""], //收货公司客户ID                                     
					sh_contactsName: [""], //收货联系人名称  
					sh_custAddrId: [""], ////装货客户地址ID									
				},
			};
		},
		methods: {
			delCard(index) {
				this.info.busiTaskaddrList.splice(index, 1);
			},
			addCard(index) {
				this.info.busiTaskaddrList.splice(index + 1, 0, {
					addr: "",
					zipCode: '',
					contactsTel: '',
					comName: ''
				});
			},
			reasonChange(e) {
				const index = e.detail.value;
				this.info.reason = this.select.reason[index].text;
			},
			submit() {
				this.info.busiTaskaddrList[0].zipCode =this.sh_map.sh_dqCode[0] 
				const info = this.info;
				var msg = "";

				switch ("") {
					case info.estimateLoadingTime:
						msg = "请输入装货日期";
						break;
					case info.estimateUnloadingTime:
						msg = "请输入卸货日期";
						break;
					case info.lineName:
						msg = "请输入途径路线";
						break;
					case info.lineMile:
						msg = "请输入路线里程";
						break;
				}
				for (let item of this.info.busiTaskaddrList) {
					var itemMsg = '';
					switch ("") {
						case item.comName:
							itemMsg = "请输入收货方名称";
							break;
						case item.contactsTel:
							itemMsg = "请输入联系电话";
							break;
						case item.zipCode:
							itemMsg = "请选择地区";
							break;
						case item.addr:
							itemMsg = "请输入详细地址";
							break;
					}
					if (itemMsg) {
						msg = itemMsg;
						break;
					}
				}
				if (msg) {
					uni.showToast({
						title: msg,
						icon: "none"
					});
					return false;
				}
				this.$api.busibillSubmit(this.info).then((res) => {
					uni.showToast({
						title: '修改成功',
						icon: "none",
						success() {
							setTimeout(() => {
								let pages = getCurrentPages(); // 当前页面        
								let beforePage = pages[pages.length - 2]; // 上上一页 
								uni.navigateBack({
									success: () => {
										beforePage.$vm.refresherList();
									}
								});
							}, 1500); // showToast默认时间
						}
					});
				})
			},
			initSelect() {
				this.$api.getReason().then(res => {
					this.select.reason = res
				})
			},
			changeAdrS(index, text) {
				this.sh_map.sh_dq[0] = text
				console.log(this.sh_map.sh_dqCode[0],88866)
				// this.changeAdrS()
				// console.log(666,text)
				// this.getJw(this.sh_map.sh_dq[index], index, 4)
			},
			// 新加的
			shmc(index, key = "") {
				this.$refs.child8.showBox({
					title: "请选择收获方名称",
					data: index,
					key,
					getData: (key, current) => {
						return new Promise(resolve => {
							this.$api.getTzs({
								name: key,
								type: "2",
								current,
								size: 20,
							}).then(res => {
								const resData = res.data.data;
								console.log(resData,666)
								resData.records.forEach(item => {
									item.$label = item.name;
									
								});
								resolve(resData);
							}).catch(res => {});
						})
					}
				});
			
			},
			doSearch(index, key = "", type) {
				if (!key) {
					uni.showToast({
						title: '请输入关键词',
						icon: 'none'
					})
					return false;
				}
				if (type == '5') {
					this.hwmc(index, key);
				} else if (type == '6') {
					this.tymc(key);
				} else if (type == '7') {
					this.zhmc(index, key);
				} else if (type == "8") {
					this.shmc(index, key)
				} else if (type == "9") {
					this.lineList(key)
				}
			},
			//获取途径路线
			lineList(key = "") {
				this.$refs.child9.showBox({
					title: "请选择途径路线",
					key,
					getData: (key) => {
						return new Promise(resolve => {
							this.$api.getLineName({
								'current': 1,
								'lineName': key,
								'size': 1000,
							}).then(res => {
								const resData = res.data.data.records.map(item => {
									item.$label = item.lineName;
									return item;
								});
								resolve(resData)
							}).catch(res => {});
						})
					}
				});
			},
			selectLine(res) {
				let item = res.item;
				this.info.lineName = item.lineName
				this.info.lineMile = item.lineMileage
				this.info.lineId = item.lineId
			},
			inputSearch(e, index, type) {
				var value = e.detail.value
				// 输入框防抖
				clearTimeout(this.debounceTimer);
				// 每次进来的时候都将之前的清除掉，如果还没到毫秒的时候就将之前的清除掉，这样就不会触发之前setTimeout绑定的事件， 如果超过毫秒，之前的事件就会被触发下次进来的时候同样清除之前的timer
				this.debounceTimer = setTimeout(() => {
					//输入框没值了，清空搜索框条件数据
					if (!value) {
						// 设置为初始状态
						return;
					}
					this.doSearch(index, value, type)
				}, 1000)
			},
			shChange(res) {
				
				let eindex = res.data;
				let item = res.item;
				console.log(res,999)
				// const index = e.detail.value;
				const obj = this.info.busiTaskaddrList[eindex];
				this.$set(obj, 'comName', item.name);
				this.$set(obj, 'contactsTel', item.contactsTel);
				this.$set(obj, 'custId', item.custId);
				this.$set(obj, 'contacts', item.contacts);
				// this.$set(this.info.busiTaskaddrList[eindex].comName, eindex, item.name)
				// this.$set(this.info.busiTaskaddrList, eindex, item.contactsTel)
				// this.$set(this.info.busiTaskaddrList, eindex, item.custId)
				// this.$set(this.info.busiTaskaddrList, eindex, item.contacts)
				if (item.list && item.list.length) {
					const firstItem = item.list[0];
					this.$set(this.sh_map.sh_dqCode, eindex, firstItem.azipCode)
					// this.$set(this.sh_map.sh_address, eindex, firstItem.addrName)
					// this.$set(this.sh_map.sh_custAddrId, eindex, item.list.length > 0 ? firstItem.addrId : '')
					this.$set(obj, 'azipCode', firstItem.azipCode);
					this.$set(obj, 'addr', firstItem.addrName);
					this.$set(obj, 'addrId', item.list.length > 0 ? firstItem.addrId : '');
					this.getJw(firstItem.addrName, eindex, 3)
				}
			},
			async getJw(data, index, type) {
				await this.$api.getLocation({
					'address': data,
					'output': 'json',
					'key': 'a5b6c60bf58424fbaaf0f4955ac9058a'
				}).then(res => {
					if (type == 1) {
						this.zh_map.zh_location[index] = res.data.geocodes[0].location
					} else if (type == 2) {
						this.zh_map.zh_dqLocation[index] = res.data.geocodes[0].location
						this.lisenter.push(res.data.geocodes[0].location)
					} else if (type == 3) {
						this.sh_map.sh_location[index] = res.data.geocodes[0].location
					} else if (type == 4) {
						this.sh_map.sh_dqLocation[index] = res.data.geocodes[0].location
						this.lisenter.push(res.data.geocodes[0].location)
					}
			
				}).catch(res => {});
			},
		},
		onLoad(o) {
			if (!o.id) {
				this.$goBack(1, 1);
				return false;
			}
			this.initSelect();
			this.$api.busibillDatail({
				id: o.id
			}).then((res) => {
				const resData = res.data.data;
				this.info = resData;
				this.info.busiTaskaddrList = resData.busiTaskaddrList.filter(el => el.addrType == 2)
				let aa = getSelectPath(this.info.busiTaskaddrList[0].zipCode)
				this.sh_map.sh_dqCode[0] = this.info.busiTaskaddrList[0].zipCode
				this.dqadd = aa.text
				console.log(aa,999)
			})
		},
		mounted(){
			this.changeAdrS()
				// this.regionData = store.getters.getRegionData;
		}
	}
</script>

<style lang="scss" scoped>
	.add-box {
		padding: 20rpx;
	}

	.add-btns {
		text-align: center;
		padding: 10rpx 0 20px;

		.btn-cancel,
		.btn-submit {

			display: inline-block;
			margin: 0 30rpx;
			border-radius: 50rpx;
			padding: 0 80rpx;
			font-size: 32rpx;
		}

		.btn-cancel {
			border: 2rpx solid #CCCCCC;
			line-height: 80rpx;
		}

		.btn-submit {
			line-height: 84rpx;
			background-color: $app-color;
		}
	}

	.del-care {
		float: right;
	}

	.add-card {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx dashed #ccc;
		line-height: 80rpx;
		color: #666;

		.uni-icon {
			font-size: 20rpx;
			margin-right: 10rpx;
		}
	}

	.info {
		background-color: #fff;
		padding-top: 0;
		margin-bottom: 30rpx;

		.info-label {
			position: relative;
			padding: 30rpx 0;
			line-height: 42rpx;
			border-bottom: 2rpx solid #dddddd;

			text {
				font-size: 32rpx;
			}

			&::after {
				content: "";
				position: absolute;
				left: -30rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 38rpx;
				background-color: $app-color;
			}
		}

		.info-item {
			display: flex;
			padding: 30rpx 0;
			border-bottom: 2rpx solid #dddddd;

			.text {
				font-size: 28rpx;
				line-height: 36rpx;
			}

			.input {
				font-size: 28rpx;
				height: 36rpx;
				line-height: 36rpx;
				flex: 1;
				padding: 0 20rpx;
			}

			.city-select {
				flex: 1;
				padding: 0 20rpx;

				::v-deep .input-value-border {
					border: 0;
					line-height: 36rpx;
					height: 36rpx;
				}
			}

			.date-select {
				flex: 1;

				::v-deep .uni-date-x--border {
					border: 0;

					.uni-date-x {
						padding: 0 10rpx;
					}

					.uni-icons {
						display: none;
					}

					.uni-date__x-input {
						line-height: 36rpx;
						height: 36rpx;
					}

					.uni-input-input {
						font-size: 28rpx;
					}
				}
			}

			&:last-child {
				border-bottom: 0;
			}
		}
	}
	.inputDq {
		font-size: 28rpx;
		height: 36rpx;
		line-height: 36rpx;
		flex: 1;
		padding: 0 20rpx;
	}
</style>